<template>
  <el-dialog :visible="visible"
             :before-close="close"
             title="已为您成功匹配到合约，是否确认匹配"
             width="900px"
             top="15vh"
             :close-on-click-modal="false"
             append-to-body>
    <div class="cont-bg">
      <el-table :data="listData"
                style="width: 100%">
        <template v-for="(item, index) in listColumn">
          <el-table-column :key="index"
                           :prop="item.type"
                           :label="item.label"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div :prop="scope"
                   :class="item.type==='totalFee'?'totalSty':''">
                {{ scope.row[item.type] || 0 }}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div slot="footer">
      <el-button type="default"
                 @click="close">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import baseMixin from "@components/mount/mixins/common";
import _ from 'lodash'
import axios from 'axios';
export default {
  name: "QuoteMatchingDialog",
  inject: ["$table"],
  mixins: [baseMixin],
  props: {
    preset: {
      type: Object,
      default: () => { }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      listData: [],
      listColumn: []
    };
  },
  mounted () {
    console.log("=====QuoteMatchingDialog", this.preset)
    this.handleQuoteMatch()
  },
  methods: {
    //报价合约匹配信息
    handleQuoteMatch () {
      const { param, childName } = this.preset
      this.listData = [{ ...childName }]
      if (childName.minimumFee) {
        this.listColumn = [
          { label: "最低费用", type: "minimumFee" },
          { label: "税费", type: "taxFee" },
          { label: "报价费用", type: "totalFee" }
        ]
        if (param?.insure) {
          this.listColumn.splice(2, 0, { label: "保险费", type: "insureFee" },);
        }
      } else {
        if (childName.transportMode === 1) {
          this.listColumn = [
            { label: "零担费", type: "transportFee" },
          ]
          if (param?.pick) {
            this.listColumn.splice(1, 0, { label: "提货费", type: "pickFee" },);
          }
          if (param?.deliver) {
            this.listColumn.splice(2, 0, { label: "送货费", type: "deliverFee" },);
          }
          if (param?.onLoad) {
            this.listColumn.splice(3, 0, { label: "装货费", type: "loadFee" },);
          }
          if (param?.offLoad) {
            this.listColumn.splice(4, 0, { label: "卸货费", type: "unloadFee" },);
          }
          if (param?.insure) {
            this.listColumn.splice(5, 0, { label: "保险费", type: "insureFee" },);
          }
          this.listColumn.push(
            { label: "税费", type: "taxFee" },
            { label: "报价费用", type: "totalFee" })
        } else {
          this.listColumn = [
            { label: "整车费", type: "transportFee" },
          ]
          if (param?.onLoad) {
            this.listColumn.splice(1, 0, { label: "装货费", type: "loadFee" },);
          }
          if (param?.offLoad) {
            this.listColumn.splice(2, 0, { label: "卸货费", type: "unloadFee" },);
          }
          if (param?.insure) {
            this.listColumn.splice(3, 0, { label: "保险费", type: "insureFee" },);
          }
          this.listColumn.push(
            { label: "税费", type: "taxFee" },
            { label: "报价费用", type: "totalFee" })
        }
      }
    },
    // 前往详情
    goDetail () {
      const { param, childName } = this.preset
      let query = {
        quotationId: param?.quotationId,
        waybillId: param.waybillId,
        subjectId: param.subjectId,
        status: param.status
      };
      this.$router.push({
        name: "quoteDetail",
        query
      });
    },
    // 取消
    close () {
      this.$emit("update:visible", false);
      this.goDetail()
    },
    // 确定
    handleSubmit: _.debounce(function () {    // 触发事件
      this.loading = true;
      this.submit();
    }, 600),
    async submit () {
      const { param, childName } = this.preset
      await axios.post(this.preset.url, {
        templateId: childName.templateId,
        subjectId: param.subjectId,
        quotationId: param?.quotationId,
      }).catch(() => {
        this.loading = false;
      });
      this.loading = false;
      this.$emit("update:visible", false);
      // 刷列表 
      this.$table.search();
    }
  }
};
</script>
<style lang="scss" scoped>
.contSty {
  min-height: 200px;
  max-height: 408px;
  overflow-x: hidden;
}
.cont-bg {
  background: #fafafa;
  margin-top: 5px;
  margin-left: 5px;
}
.totalSty {
  color: var(--prev-color-primary) !important;
}
</style>
